<template>
	<view class="content_parent">
		<custom-navbar :title="pageTitle" :style="navbarStyle" />
		<view class="background-view">
			<view style="display: flex; width: 100%; height: 36rpx; font-size: 26rpx; font-weight: 500; color: #ffffff; margin-top: 176rpx; padding-top: 18rpx">
				<view v-if="userInfo.province" @tap="handleNaver" style="display: flex; align-items: center; height: 36rpx; width: 156.5rpx; margin-left: 32rpx">
					<image style="width: 30rpx; height: 30rpx; margin-right: 6rpx" src="../../static/imags/ditu.png" mode=""></image>
					{{ showLocation(userInfo.province, userInfo.city) }}
				</view>
				<!-- <view style="height: 36rpx; margin-left: 32rpx">内容：{{ pubCount }}</view> -->
				<view style="height: 36rpx; margin-left: 32rpx">会员数：{{ memberCount }}</view>
				<view style="height: 36rpx; margin-left: 32rpx">浏览量：{{ watchCount }}</view>
			</view>
			<view class="search_wrap">
				<view @tap="handleNaver" class="naver">附近商家</view>
				<view class="input_box" @tap.stop="handleSearch">
					<u--input
						:readonly="true"
						:focus="false"
						shape="circle"
						v-model="keyWord"
						placeholder="搜你要找的会员"
						prefixIcon="search"
						border="none"
						:clearabled="false"
						prefixIconStyle="font-size: 24px;color: #777777;"
						:custom-style="{ height: '72rpx', paddingLeft: '20rpx', backgroundColor: '#ffffff' }"
					></u--input>
				</view>
				<view class="search">
					<button @tap="handleSearch" style="font-size: 24rpx" type="default" size="mini">AI搜索</button>
				</view>
			</view>
			<view class="background-view-image">
				<u-swiper @click="handleView" height="220rpx" :list="bannerList" indicator indicatorMode="line" circular radius="24rpx"></u-swiper>
			</view>
			<view class="background-body">
				<image @click="fenxianghui" class="background-body-one" :src="homeImg1"></image>
				<image @click="study" class="background-body-two" :src="homeImg2"></image>
			</view>
			<view class="background-body">
				<image @click="feisuxuetang" class="background-body-one" :src="homeImg3"></image>
				<image @click="zaishengziyuan" class="background-body-two" :src="homeImg4"></image>
			</view>
		</view>
		<view class="view-title">
			<view class="view-title-text">
				<u-notice-bar :text="text1" duration="3000" bgColor="#FFFFFF" color="#777777"></u-notice-bar>
			</view>
		</view>
		<view class="body-menu">
			<view style="width: 104rpx; height: 100%; margin-left: 38rpx" v-for="(item, index) in nameList" :key="index" @click="goSelect(index)">
				<image class="body-menu-image" :src="item.url"></image>
				<view class="body-menu-text">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="show-items">
			<view class="show-items-title">
				<view class="show-items-title-one">废纸最新供求资源</view>
				<view class="show-items-title-two" @click="goSelect(0)">更多</view>
				<image class="show-items-title-three" src="../../static/imags/Down_(下).png" @click="goSelect(0)"></image>
			</view>
			<view class="show-items-item" v-for="(item, index) in wastePaperList" :key="item.id" @tap="gotoDetail(item)">
				<view class="show-items-item-left">
					<image mode="aspectFill" class="show-items-item-image" :src="item.picUrl"></image>
					<view class="show-items-item-image-bontton">
						<image src="../../static/images/time.png"></image>
						<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
					</view>
				</view>
				<view class="show-items-item-right">
					<view class="show-items-item-right-one">
						<view :class="[item.resourceType == '1' ? 'active' : '']">
							{{ item.resourceType == '1' ? '出售' : '采购' }}
						</view>
						<view style="font-weight: 600">{{ item.title }}</view>
					</view>
					<view class="show-items-item-right-two">
						{{ item.pubContent }}
					</view>
					<view class="show-items-item-right-four">
						<image src="../../static/images/location.png"></image>
						<view>
							{{ showLocation(item.province, item.city) }}
						</view>
						<view>￥{{ item.price ? item.price : '电议' }}</view>
					</view>
					<view class="show-items-item-right-five">
						<image mode="aspectFill" :src="item.briefUserInfo.avatar"></image>
						<view>{{ item.briefUserInfo.nickName }}</view>
						<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
					</view>
					<view class="show-items-item-right-six">
						<view class="one b-btn">
							<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
							<view class="b-count">
								{{ item.viewCount == null ? 0 : item.viewCount }}
							</view>
						</view>
						<view @tap.stop="handleCollect(item, index)" class="two b-btn">
							<image v-if="item.collectFlag == '0'" class="b-img" src="../../static/images/collect.png"></image>
							<image v-else class="b-img" src="../../static/images/like1.png" />
							<view class="b-count">
								{{ item.collectCount == null ? 0 : item.collectCount }}
							</view>
						</view>
						<view class="three b-btn">
							<image class="b-img" src="../../static/images/message.png"></image>
							<view class="b-count">
								{{ item.commentCount == null ? 0 : item.commentCount }}
							</view>
						</view>
						<view class="four b-btn">
							<image class="b-img" src="../../static/images/zhaunfa.png"></image>
							<button class="share-btn" open-type="share" @tap.stop="handShareCountAdd(item, index)">分享 {{ item.shareCount == null ? 0 : item.shareCount }}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image
			@tap="handleDetail(item)"
			v-for="(item, index) in bannerList1"
			:key="index"
			style="margin-top: 30rpx; width: 686rpx; margin-left: 32rpx; height: 184rpx"
			:src="item.content"
		></image>
		<view class="show-items">
			<view class="show-items-title">
				<view class="show-items-title-one" @click="goSelect(1)">废塑最新供求资源</view>
				<view class="show-items-title-two" @click="goSelect(1)">更多</view>
				<image class="show-items-title-three" src="../../static/imags/Down_(下).png"></image>
			</view>
			<view class="show-items-item" v-for="(item, index) in wastePlasticList" :key="item.id" @tap="gotoDetail(item)">
				<view class="show-items-item-left">
					<image class="show-items-item-image" mode="aspectFill" :src="item.picUrl"></image>
					<view class="show-items-item-image-bontton">
						<image src="../../static/images/time.png"></image>
						<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
					</view>
				</view>
				<view class="show-items-item-right">
					<view class="show-items-item-right-one">
						<view :class="[item.resourceType == '1' ? 'active' : '']">
							{{ item.resourceType == '1' ? '出售' : '采购' }}
						</view>
						<view style="font-weight: 600">{{ item.title }}</view>
					</view>
					<view class="show-items-item-right-two">
						{{ item.pubContent }}
					</view>
					<view class="show-items-item-right-four">
						<image src="../../static/images/location.png"></image>
						<view>
							{{ showLocation(item.province, item.city) }}
						</view>
						<view>￥{{ item.price ? item.price : '电议' }}</view>
					</view>
					<view class="show-items-item-right-five">
						<image :src="item.briefUserInfo.avatar"></image>
						<view>{{ item.briefUserInfo.nickName }}</view>
						<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
					</view>
					<view class="show-items-item-right-six">
						<view class="one b-btn">
							<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
							<view class="b-count">
								{{ item.viewCount == null ? 0 : item.viewCount }}
							</view>
						</view>
						<view @tap.stop="handleCollect(item, index)" class="two b-btn">
							<image v-if="item.collectFlag == '0'" class="b-img" src="../../static/images/collect.png"></image>
							<image v-else class="b-img" src="../../static/images/like1.png" />
							<view class="b-count">
								{{ item.collectCount == null ? 0 : item.collectCount }}
							</view>
						</view>
						<view class="three b-btn">
							<image class="b-img" src="../../static/images/message.png"></image>
							<view class="b-count">
								{{ item.commentCount == null ? 0 : item.commentCount }}
							</view>
						</view>
						<view class="four b-btn">
							<image class="b-img" src="../../static/images/zhaunfa.png"></image>
							<button class="share-btn" open-type="share" @tap.stop="handShareCountAdd(item, index)">分享 {{ item.shareCount == null ? 0 : item.shareCount }}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image
			@tap="handleDetail(item)"
			v-for="(item, index) in bannerList2"
			:key="index"
			style="margin-top: 30rpx; width: 686rpx; margin-left: 32rpx; height: 184rpx"
			:src="item.content"
		></image>
		<view class="show-items">
			<view class="show-items-title">
				<view class="show-items-title-one" @click="goSelect(2)">设备最新供求资源</view>
				<view class="show-items-title-two" @click="goSelect(2)">更多</view>
				<image class="show-items-title-three" src="../../static/imags/Down_(下).png"></image>
			</view>
			<view class="show-items-item" v-for="(item, index) in deviceList" :key="item.id" @tap="gotoDetail(item)">
				<view class="show-items-item-left">
					<image class="show-items-item-image" mode="aspectFill" :src="item.picUrl"></image>
					<view class="show-items-item-image-bontton">
						<image src="../../static/images/time.png"></image>
						<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
					</view>
				</view>
				<view class="show-items-item-right">
					<view class="show-items-item-right-one">
						<view :class="[item.resourceType == '1' ? 'active' : '']">
							{{ item.resourceType == '1' ? '出售' : '采购' }}
						</view>
						<view style="font-weight: 600">{{ item.title }}</view>
					</view>
					<view class="show-items-item-right-two">
						{{ item.pubContent }}
					</view>
					<view class="show-items-item-right-four">
						<image src="../../static/images/location.png"></image>
						<view>
							{{ showLocation(item.province, item.city) }}
						</view>
						<view>￥{{ item.price ? item.price : '电议' }}</view>
					</view>
					<view class="show-items-item-right-five">
						<image :src="item.briefUserInfo.avatar"></image>
						<view>{{ item.briefUserInfo.nickName }}</view>
						<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
					</view>
					<view class="show-items-item-right-six">
						<view class="one b-btn">
							<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
							<view class="b-count">
								{{ item.viewCount == null ? 0 : item.viewCount }}
							</view>
						</view>
						<view @tap.stop="handleCollect(item, index)" class="two b-btn">
							<image v-if="item.collectFlag == '0'" class="b-img" src="../../static/images/collect.png"></image>
							<image v-else class="b-img" src="../../static/images/like1.png" />
							<view class="b-count">
								{{ item.collectCount == null ? 0 : item.collectCount }}
							</view>
						</view>
						<view class="three b-btn">
							<image class="b-img" src="../../static/images/message.png"></image>
							<view class="b-count">
								{{ item.commentCount == null ? 0 : item.commentCount }}
							</view>
						</view>
						<view class="four b-btn">
							<image class="b-img" src="../../static/images/zhaunfa.png"></image>
							<button class="share-btn" open-type="share" @tap.stop="handShareCountAdd(item, index)">分享 {{ item.shareCount == null ? 0 : item.shareCount }}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image
			@tap="handleDetail(item)"
			v-for="(item, index) in bannerList3"
			:key="index"
			style="margin-top: 30rpx; width: 686rpx; margin-left: 32rpx; height: 184rpx"
			:src="item.content"
		></image>
		<view style="height: 130rpx"></view>
		<!-- 中间加号按钮（浮动在原生 Tab 栏上方） -->
		<view class="center-btn" @click="handleAdd">
			<image src="../../static/images/wyfb.png" class="center-icon" />
		</view>
		<view class="center-btn1">
			<image src="../../static/images/zxkf.png" class="center-icon" />
			<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
		</view>
	</view>
</template>
<script>
import CustomNavbar from '@/components/CustomNavbar.vue';
import locationFormatter from '@/util/locationFormatter';
import { mapState } from 'vuex'; // 关键导入
const QQMapWX = require('../../config/qqmap-wx-jssdk.min.js');
export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			bannerList: [],
			bannerList1: [],
			bannerList2: [],
			bannerList3: [],
			homeImg1: '',
			homeImg2: '',
			homeImg3: '',
			homeImg4: '',
			watchCount: null,
			memberCount: null,
			pubCount: null,
			pageSize: 1,
			pageNum: 3,
			keyWord: '',
			address: '',
			latitude: '',
			longitude: '',
			text1: '欢迎进入找纸塑网线上平台，您在使用过程中遇到任何问题，请致电找纸塑网助理安夏：15396802565',
			curInd: 0,
			pageTitle: '找纸塑网AI',
			navbarStyle: {
				backgroundColor: '#1BE820',
				color: '#fff'
			},
			src: 'https://cdn.uviewui.com/uview/album/1.jpg',
			nameList: [
				{
					url: '../../static/imags/Frame_6.png',
					name: '废纸'
				},
				{
					url: '../../static/imags/Frame_7.png',
					name: '废塑料'
				},
				{
					url: '../../static/imags/Frame_8.png',
					name: '设备'
				},
				{
					url: '../../static/imags/Frame_9.png',
					name: '合作专区'
				},
				{
					url: '../../static/imags/Frame_10.png',
					name: '会员服务'
				}
			],
			itemList: [1, 2, 3],
			wastePaperList: [],
			wastePlasticList: [],
			deviceList: [],
			provinceName: '江苏省',
			cityName: '南京市',
			shareTile: ''
		};
	},
	onLoad() {
		this.getMyLoction();
		wx.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	onShow() {
		this.getBanner();
		this.getHeadMessage();
		this.search();
	},
	computed: {
		...mapState(['userInfo', 'pubInfoUserInfo'])
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.shareTile, //分享的名称
			path: '/pages/login/index',
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '找纸塑网一废纸废塑料AI获客平台',
			path: '/pages/login/index',
			type: 5,
			summary: ''
		};
	},
	methods: {
		handleContact() {},
		handleAdd() {
			if (!this.userInfo.userId) {
				uni.navigateTo({ url: '/pages/index/index' });
				return;
			}
			uni.navigateTo({ url: '/page/add/add' });
		},
		//点击轮播图
		handleDetail(e) {
			console.log(e, 55);
			if (e.clickUrl) {
				uni.navigateTo({
					url: `/page/detail/index?id=${e.clickUrl}`
				});
			}
		},
		//查看介绍
		handleView() {
			uni.navigateTo({
				url: `/page/introDetail/index?id=` + 7
			});
		},
		//增加分享次数
		handShareCountAdd(item, index) {
			this.shareTile = item.title;
			this.$https
				.post(this.$api.getPubShareCountAdd, {
					id: item.id
				})
				.then((res) => {
					if (res.code === 200) {
						this.search();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		showLocation(pro, city) {
			const displayName = locationFormatter.format(pro, city);
			return displayName;
			console.log(displayName); // 输出：浙江杭州
		},
		//点击搜索
		handleSearch() {
			uni.navigateTo({
				url: '/page/search/index'
			});
			// uni.navigateTo({
			// 	url: '/page/huiyuanfuwu/index'
			// });
		},
		//点赞
		handleCollect(item, index) {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			this.$https
				.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				})
				.then((res) => {
					if (res.code === 200) {
						this.search();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		getMyLoction() {
			this.provinceName = uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).provinceName : '江苏省';
			this.cityName = uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).cityName : '徐州市';
		},
		gotoDetail(item) {
			uni.navigateTo({
				url: `/page/detail/index?id=${item.id}&title=${item.title}`
			});
		},
		search() {
			const query = {
				pageSize: 3,
				pageNum: 1,
				keyWord: this.keyWord,
				checkStatus: 2
			};
			this.$https.post(this.$api.getThreeData, query).then((res) => {
				if (res.code === 200) {
					const data = res.data;
					this.wastePaperList = res.data.wastePaperList;
					this.wastePlasticList = res.data.wastePlasticList;
					this.deviceList = res.data.deviceList;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		getHeadMessage() {
			this.$https.get(this.$api.headerInfo, {}).then((res) => {
				if (res.code === 200) {
					const data = res.data;
					this.pubCount = data.pubCount == null ? 0 : data.pubCount;
					this.memberCount = data.memberCount == null ? 0 : data.memberCount;
					this.watchCount = data.watchCount == null ? 0 : data.watchCount;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		getBanner() {
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '1'
				})
				.then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data.map((item) => {
							return item.content;
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '17'
				})
				.then((res) => {
					if (res.code === 200) {
						this.bannerList1 = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '18'
				})
				.then((res) => {
					if (res.code === 200) {
						this.bannerList2 = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '19'
				})
				.then((res) => {
					if (res.code === 200) {
						this.bannerList3 = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '20'
				})
				.then((res) => {
					if (res.code === 200) {
						this.homeImg1 = res.data[0].content;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '22'
				})
				.then((res) => {
					if (res.code === 200) {
						this.homeImg2 = res.data[0].content;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '23'
				})
				.then((res) => {
					if (res.code === 200) {
						this.homeImg3 = res.data[0].content;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: '24'
				})
				.then((res) => {
					if (res.code === 200) {
						this.homeImg4 = res.data[0].content;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		goSelect(index) {
			if (index == 2) {
				uni.navigateTo({
					url: '/page/feizhi/index?type=' + '设备'
				});
			} else if (index == 4) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				uni.navigateTo({
					url: '/page/kaitonghuiyuan/index'
				});
			} else if (index == 0) {
				uni.navigateTo({
					url: '/page/feizhi/index?type=' + '废纸'
				});
			} else if (index == 1) {
				uni.navigateTo({
					url: '/page/feizhi/index?type=' + '废塑料品种'
				});
			} else {
				uni.navigateTo({
					url: '/page/hangqingzixun/index'
				});
			}
		},
		feisuxuetang() {
			uni.navigateTo({
				url: '/page/feisuxuetang/index'
			});
		},
		zaishengziyuan() {
			uni.navigateTo({
				url: '/page/zaishengziyuan/index'
			});
		},
		fenxianghui() {
			uni.navigateTo({
				url: '/page/fenxiang/index'
			});
		},
		study() {
			uni.navigateTo({
				url: '/page/study/index'
			});
		},
		goDetail(item) {
			uni.navigateTo({
				url: '/page/detail/index?id=' + item
			});
		},
		handleTabChange(newTab) {
			this.activeTab = newTab; // 更新选中的 tab
			if (newTab === 'add') {
				// 中间按钮特殊跳转逻辑
				uni.navigateTo({
					url: '/pages/add/index'
				});
			} else {
				// 页面跳转
				const tabPages = {
					home: '/pages/home/index',
					zone: '/pages/zone/index',
					message: '/pages/message/index',
					profile: '/pages/profile/index'
				};
				uni.switchTab({
					url: tabPages[newTab]
				});
			}
		},
		handleNaver() {
			uni.navigateTo({
				url: '/page/huiyuanfuwu/index'
			});
		}
	},
	onReady() {}
};
</script>
<style lang="scss" scoped>
.content_parent {
	background: #f7f7f7;
	width: 100%;
	overflow-x: hidden;

	/* 直接禁止横向滚动 */
	.center-btn {
		position: fixed;
		bottom: 40rpx;
		/* 原生 Tab 高度 + 安全区域 */
		right: -50rpx;
		transform: translateX(-50%);
		z-index: 9999;
		flex-direction: column;
		display: flex;
		align-items: center;

		.center-icon {
			width: 124rpx;
			height: 124rpx;
		}
	}

	.center-btn1 {
		position: fixed;
		bottom: 200rpx;
		/* 原生 Tab 高度 + 安全区域 */
		right: -25rpx;
		transform: translateX(-50%);
		z-index: 9999;
		flex-direction: column;
		display: flex;
		align-items: center;
		width: 100rpx;
		height: 120rpx;

		.center-icon {
			width: 150rpx;
			height: 120rpx;
		}

		button {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			background-color: transparent;
		}
	}

	::v-deep .navbar {
		display: flex;
		justify-content: center;
	}

	.background-view {
		width: 750rpx;
		height: 650rpx;
		background-image: url('/static/imags/Frame_1.png');
		background-size: cover;
		background-position: center;

		.background-view-image {
			width: 686rpx;
			height: 220rpx;
			margin-top: 28rpx;
			margin-left: 32rpx;
			border-radius: 24rpx;
		}

		.background-body {
			width: 686rpx;
			height: 170rpx;
			margin-top: 16rpx;
			margin-left: 30rpx;
			display: flex;

			.background-body-one {
				border-radius: 20rpx;
				width: 338rpx;
				height: 170rpx;
			}

			.background-body-two {
				border-radius: 20rpx;
				width: 338rpx;
				height: 170rpx;
				margin-left: 10rpx;
			}
		}
	}

	.search_wrap {
		margin-top: 40rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;

		.naver {
			width: 60rpx;
			color: #fff;
			font-size: 26rpx;
		}

		.input_box {
			flex: 1;
		}

		.search {
			margin-top: 8rpx;
			position: absolute;
			right: 55rpx;
			text-align: right;
			width: 150rpx;
			z-index: 88;
		}
	}

	.view-title {
		margin-left: 32rpx;
		height: 72rpx;
		width: 686rpx;
		display: flex;
		margin-top: 134rpx;

		.view-title-text {
			width: 686rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx !important;
			background: #ffffff;
		}
	}

	.body-menu {
		margin-top: 40rpx;
		width: 100%;
		height: 148rpx;
		display: flex;

		.body-menu-image {
			width: 92rpx;
			height: 92rpx;
			margin-left: 6rpx;
		}

		.body-menu-text {
			text-align: center;
			height: 36rpx;
			width: 104rpx;
			margin-top: 20rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.show-items {
		margin-top: 46rpx;
		width: 100%;

		.show-items-title {
			display: flex;
			height: 50rpx;
			width: 686rpx;
			margin-left: 32rpx;

			.show-items-title-one {
				width: 584rpx;
				height: 50rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.show-items-title-two {
				width: 70rpx;
				height: 40rpx;
				margin-top: 5rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.show-items-title-three {
				width: 32rpx;
				height: 32rpx;
				margin-top: 9rpx;
			}
		}

		.show-items-item {
			width: 686rpx;
			height: 322rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			display: flex;

			.show-items-item-left {
				.show-items-item-image {
					width: 212rpx;
					height: 224rpx;
					margin-top: 28rpx;
					margin-left: 20rpx;
					border-radius: 24rpx;
				}

				.show-items-item-image-bontton {
					height: 70rpx;
					width: 212rpx;
					margin-left: 20rpx;
					display: flex;
					margin-top: 20rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					view {
						width: 128rpx;
						height: 36rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 4rpx;
					}
				}
			}

			.show-items-item-right {
				margin-left: 20rpx;
				height: 322rpx;

				.show-items-item-right-one {
					display: flex;
					align-items: center;

					:nth-child(1) {
						width: 72rpx;
						height: 40rpx;
						line-height: 40rpx;
						background-color: #556983;
						border-radius: 10rpx;
						margin-top: 38rpx;
						margin-right: 10rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 18rpx;
						color: #fff;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

					.active {
						width: 72rpx;
						height: 40rpx;
						line-height: 40rpx;
						background-color: #4fe200;
						border-radius: 10rpx;
						margin-top: 38rpx;
						margin-right: 10rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 18rpx;
						color: #fff;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

					:nth-child(2) {
						margin-top: 38rpx;
						width: 340rpx;
						height: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 39rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						overflow: hidden;
						/* 确保超出部分的文本会被隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						display: -webkit-box;
						/* 使用弹性盒子模型 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列子元素 */
					}
				}

				.show-items-item-right-two {
					width: 414rpx;
					height: 68rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #333;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 10rpx;
					overflow: hidden;
					/* 确保超出部分的文本会被隐藏 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					display: -webkit-box;
					/* 使用弹性盒子模型 */
					-webkit-line-clamp: 1;
					/* 限制显示两行 */
					-webkit-box-orient: vertical;
					/* 垂直排列子元素 */
				}

				.show-items-item-right-four {
					display: flex;
					width: 414rpx;
					height: 44rpx;

					image {
						width: 24rpx;
						height: 26rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						margin-top: 9rpx;
					}

					:nth-child(2) {
						flex: 1;
						height: 44rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #333;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						padding-left: 4rpx;
					}

					:nth-child(3) {
						width: 150rpx;
						height: 44rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 600;
						font-size: 24rpx;
						color: #ff4400;
						line-height: 44rpx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}

				.show-items-item-right-five {
					display: flex;
					width: 414rpx;
					height: 44rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-top: 2rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						border: 1rpx solid #e4e8ef;
					}

					:nth-child(2) {
						width: 220rpx;
						line-height: 44rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						padding-left: 10rpx;
					}

					:nth-child(3) {
						width: 154rpx;
						line-height: 44rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 20rpx;
						color: #ff4400;
						line-height: 44rpx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}

				.show-items-item-right-six {
					padding-left: 10rpx;
					height: 40rpx;
					width: 414rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					line-height: 40rpx;

					.b-btn {
						display: flex;

						.b-img {
							width: 40rpx;
							height: 40rpx;
						}

						.b-count {
							margin-left: 4rpx;
							font-size: 24rpx;
						}
					}

					.four {
						width: 120rpx;
						position: relative;

						.b-img {
							width: 40rpx;
							height: 36rpx;
							// z-index: 22;
						}

						.share-btn {
							background-color: transparent;
							padding-left: 40rpx;
							position: absolute;
							font-size: 22rpx;
							line-height: 37rpx;
							top: 0;
						}
					}

					.show-items-item-right-six-image1 {
						width: 50rpx;
						height: 32rpx;
						margin-top: 1rpx;
					}

					.show-items-item-right-six-view1 {
						width: 100rpx;
						height: 40rpx;
						line-height: 34rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
}
</style>
